#editable_list.coffee

###
Generates and stores in the document a list
@param div target table id
@param data Array of objects heuresSAE

TODO: oppa object style ! for scope
TODO: clean css classes names

Works with the following html structure

div.editable_list_table>table.editable_list+div.editable_list_panel

###

id = 'edit_crme_hours_list'
source = crvapp.crvaDetails.flight.listeHeuresSAE
table  = $('#'+id)
headers= table.find('th').text().split(' ')
###
if source.length == 0
	source = new HeuresSAE();
	source.populate('x', '12', '3', '2')
	source = [source]
	source2 = new HeuresSAE();
	source2.populate('x', '22', '4', '5')
	source.push(source2)


# Generate lines from data
for i in source
	# creating rows
	row = $('<tr></tr>')
	
	for u in headers
		console.warn( "get property with name")
		row.append($('<td></td>').text(u))
	
	# specific version for HeuresSAE
	row.append $('<td>'+i.serviceAerien+'</td>')
	row.append $('<td>'+i.dureeVolJour+'</td>')
	row.append $('<td>'+i.dureeVolNuit+'</td>')

	# add controllers
	row.on 'click', (e)->
		editable_list_select(this)
		# we don't want to break everything
		e.stopPropagation()
	# constructing table from data source
	table.append(row)
###
# add toolbar
toolbar = $('<tr class="table_editor"></tr>')
toolbar.append( $('<td colspan="3"></td>').append( $('<div class="editable_list_ctrl add">+</div>'),$('<div class="editable_list_ctrl rem">-</div>'),$('<div class="editable_list_ctrl edi">M</div>'),$('<div class="float validate button">Ok</div>')))
# insert
table.find('tfoot').append( toolbar)

###
sets class 'edit_table_selected_row' when clicking on a row
###
editable_list_select = (div)->
	div = $(div)
	if !div.hasClass('edit_table_selected_row')
		$('.edit_table_selected_row').removeClass('edit_table_selected_row')
		div.addClass('edit_table_selected_row')

# click event ctrllers
$('.add').on 'click',(e)->
	if !$(this).hasClass('selected')
		$('.editable_list_ctrl').removeClass('selected')
		$(this).addClass('selected')
	editable_list_ctrl 'add',e
$('.rem').on 'click',(e)->
	if !$(this).hasClass('selected')
		$('.editable_list_ctrl').removeClass('selected')
		$(this).addClass('selected')
	editable_list_ctrl 'rem',e
$('.edi').on 'click',(e)->
	if !$(this).hasClass('selected')
		$('.editable_list_ctrl').removeClass('selected')
		$(this).addClass('selected')
	editable_list_ctrl 'edi',e

# hide it asap
$('.editable_list_table').find('.editable_list_edit_panel').hide()


###
Executes requested action on selected row
TODO: popup message system
###
editable_list_ctrl = ( action, event)->
	# can be undefined
	row = $('.edit_table_selected_row')

	# a row needs to be selected in two action cases
	if action != 'add' && row.length == 0
		console.error('Cliquez sur une ligne du tableau pour la sélectionner')
		return
	# OOP could better this
	panel = $(event.target).parents('.editable_list_table').find('.editable_list_edit_panel')
	# Do it !
	# Put your data management functions here
	if action == 'add'
		# remove selected style
		$('.edit_table_selected_row').removeClass('.edit_table_selected_row')
		panel.show()
	else if action == 'rem'
		$('.edit_table_selected_row').remove()
		return
	else if action == 'edi'
		# highlight panels elements with selected values
		# TODO: later highlight and set value in the editor
		panel.show()
		crvapp.crvaDetails.loadDataForEditHours(row)
	else
		# should never be there
		console.error('erreur #2')
		return

	# bind action on validate button
	# there might already be a bound event
	$('#edit_flight_hours .validate').off('click')
	$('#edit_flight_hours .validate').on 'click',(e)->
		$('.editable_list_ctrl').removeClass('selected')
		editable_list_act( e, action, panel)
		panel.hide()

	# Here we reset any selected style
	# TODO: super ugly
	$(event.target).parents('.editable_list_table').children('tr').removeClass('.edit_table_selected_row')

editable_list_act = ( event, action, panel)->
	# Object model will replace the following
	# executes user intention
	if action == 'add' || action == 'edi'
		# let's create a row the same way we did in initialisation
		# creating the row
		tr = $('<tr></tr>')
		dureeVolJour = $("#l_1_day_timespinner2").val() + ":" + $("#l_3_day_timespinner2").val()
		dureeVolNuit = $("#l_1_night_timespinner3").val() + ":" + $("#l_3_night_timespinner3").val()
		for i in table.parents().find('.editable_list_edit_panel .row_selected')
			# keeping only the first td if any
			if $(i).find('td').length > 0
				text = $( $(i).find('td')[0]).text()
			else
				text = $(i).text().split(' ')[0]
			# saving it
			tr.append($("<td class='codeServiceAerien'>"+text+"</td> <td class='dureeVolJour'>"+ dureeVolJour + "</td> <td class='dureeVolNuit'>" + dureeVolNuit + "</td>"))
		# adding a select controller cause one might need to edit it
		tr.on 'click', (e)->
			editable_list_select(this)
			# we don't want to break everything
			e.stopPropagation()
		# send to doc
		if action == 'edi'
			# edit means replace with anew
			if text != "" && text != undefined && text != null
				# ...
				$('.edit_table_selected_row').replaceWith(tr)
			else
				rowSelected = table.find('tr.edit_table_selected_row')
				text = rowSelected.find('td.codeServiceAerien').text()
				tr = $("<tr><td class='codeServiceAerien'>"+text+"</td> <td class='dureeVolJour'>"+ dureeVolJour + "</td> <td class='dureeVolNuit'>" + dureeVolNuit + "</td></tr>")
				$('.edit_table_selected_row').replaceWith(tr)
		else
			if text != "" && text != undefined && text != null
				# ...
				table.find('tbody').append(tr)
			else
				alert("Veuillez saisir un type d'heures.")
	else
		# thou shall not pass
		console.error('erreur #1')
		return
	# clean everything
	$('#edit_flight_hours .validate').off('click')


